<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common.jsp"%>

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
	content="An Amaze UI template that helps you build fast, modern mobile web apps.">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>我的月卡</title>

<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="icon" type="image/png" href="i/favicon.png">

<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">

<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192"
	href="i/touch/chrome-touch-icon-192x192.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title"
	content="Amaze UI Sfavicon.pngtarter Kit">
<link rel="apple-touch-icon" href="i/touch/apple-touch-icon.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage"
	content="i/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<style type="text/css">
.price-font {
	color: #fe6696;
	width: 50%;
	float: left;
}

.font-text-right {
	text-align: right;
}

.am-gallery-default .am-gallery-title {
	color: #333333;
}

.am-gallery-default .am-gallery-title {
	margin-top: 0px;
}

.text-border {
	padding: 2px;
	border-left: 1px solid #DEDEDE;
	border-right: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
}

.am-tabs-d2 .am-tabs-nav {
	background-color: #fff;
}

.am-tabs-d2 .am-tabs-nav>.am-active:after {
	border-bottom-color: #fff;
}

.am-tabs-d2 .am-tabs-nav li {
	height: 50px;
}

.am-tabs-d2 .am-tabs-nav a {
	line-height: 50px;
}

.am-tabs-d2 .am-tabs-nav>.am-active a {
	color: #ec6c2c;
	line-height: 50px;
	font-weight: bold;
}

.am-tabs-d2 .am-tabs-nav>.am-active {
	border-bottom: 3px solid #ec6c2c;
	background-color: #fff;
}

.am-tabs-bd .am-tab-panel {
	padding: 0;
}

.am-tabs-bd {
	border: none;
}

.am-list {
	margin-bottom: 0;
}

.am-list-news-default .am-list>li {
	border-color: #dddddd;
}

.am-titlebar-multi .am-titlebar-title {
	font-weight: normal;
}
</style>
<script>
	$(function() {
// 		var winWidth = $(document).width();
// 		var winHeight = $(document).height();
// 		var widthRule = winWidth - 130;
// 		var marginTop = winHeight/4;
// 		$('#empty').css('margin-top', marginTop+'px');
	});
</script>
</head>
<body>
		<!-- 
		<figure id="empty" data-am-widget="figure"
			class="am am-figure am-figure-default " data-am-figure="{}"
			style="margin: 0;">
			<div style="text-align: center;" align="center">
				<img src="<%=basePath%>static/images/xiaobo/no_records.png"
					style="margin: 0 auto; padding: 0px; height: 8em; width: 8em;" />
				<div style="margin-top: 0.3em;">暂无月卡信息,首次开通现场登记</div>
			</div>
		</figure>
		
		<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi"
			style="border: none; background-color: #FFFFFF; padding-left: 15px; padding-right: 10px; height: 80px; margin-top: 2px; margin-bottom: 0;">
			<nav style="padding-top: 5px; padding-bottom: 5px;">
				<img src="${headImgUrl }" alt="" onerror="serDefaultImg(0)"
					style="width: 70px; height: 70px;">
			</nav>
			<div class="am-titlebar-title"
				style="padding: 1em 1em; line-height: 42px;">
				<div class="am-list-item-text"
					style="font-size: 1.6rem; color: #292929;">${nickName }</div>
				<div class="am-list-item-text"
					style="font-size: 1.4rem; color: #666666;">${province }${city }</div>
			</div>
		</div>

		<div data-am-widget="list_news"
			class="am-list-news am-list-news-default"
			style="margin: 0; margin-top: 10px;">
			<div class="am-list-news-bd">
				<ul class="am-list">
					<li class="am-g am-list-item-desced"
						style="padding-left: 10px; padding-right: 10px;">
						<div class="am-u-sm-8" style="color: #666666;">截止日期:2017-09-01</div>
						<div class="am-u-sm-4" style="text-align: right; color: #ec6c2c;">已过期</div>
					</li>
				</ul>
			</div>
		</div>
		<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi"
			style="border: none; margin: 0; padding-left: 20px; padding-right: 20px; height: 100px; background: #FFF;">
			<nav style="padding-top: 10px; padding-bottom: 10px;">
				<img
					src="http://localhost:8080/bamboo/static/images/xiaobo/pay_wait.png"
					style="width: 80px; height: 80px;">
			</nav>
			<div class="am-titlebar-title" style="padding: 1.2em 1.2em;">
				<div class="am-list-item-text"
					style="font-size: 1.6rem; padding: 4px 0; color: #666666;">
					<span>车牌号：</span> <span style="color: #f62e54; font-weight: bold;">粤B12345</span>
				</div>
				<div class="am-list-item-text"
					style="font-size: 1.6rem; padding: 4px 0; color: #666666;">
					<span>停车场：</span> <span style="color: #292929;">腾达智能停车场</span>
				</div>
			</div>
		</div>
		<div data-am-widget="list_news"
			class="am-list-news am-list-news-default"
			style="margin: 0; border-bottom: none;">
			<div class="am-list-news-bd">
				<ul class="am-list">
					<li class="am-g am-list-item-desced"
						style="padding: 4px 10px; border-bottom: none;">
						<div class="am-u-sm-12" style="text-align: right; padding: 0;">
							<button id="1_1_payBtn" type="button"
								class="am-btn am-btn-primary am-round"
								style="padding-left: 1.2em; padding-right: 1.2em; background-color: #ec6c2c; color: #fff; border-color: #ec6c2c; border-radius: 4px; font-size: 1.6rem;"
								onclick="toPay(1, 1, 1,60.9, 'T123456')">管理</button>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div data-am-widget="list_news"
			class="am-list-news am-list-news-default"
			style="margin: 0; margin-top: 10px;">
			<div class="am-list-news-bd">
				<ul class="am-list">
					<li class="am-g am-list-item-desced"
						style="padding-left: 10px; padding-right: 10px;">
						<div class="am-u-sm-8" style="color: #666666;">2016-08-21
							12:43:21</div>
						<div class="am-u-sm-4" style="text-align: right; color: #2baf2b;">交易成功</div>
					</li>
				</ul>
			</div>
		</div>
		<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi"
			style="border: none; margin: 0; padding-left: 20px; padding-right: 20px; height: 100px; background: #FFF;">
			<nav style="padding-top: 10px; padding-bottom: 10px;">
				<img
					src="http://localhost:8080/bamboo/static/images/xiaobo/pay_success.png"
					style="width: 80px; height: 80px;">
			</nav>
			<div class="am-titlebar-title" style="padding: 1.2em 1.2em;">
				<div class="am-list-item-text"
					style="font-size: 1.6rem; padding: 4px 0; color: #666666;">
					<span>充值金额：</span> <span style="color: #f62e54; font-weight: bold;">￥88.88</span>
				</div>
				<div class="am-list-item-text"
					style="font-size: 1.6rem; padding: 4px 0; color: #666666;">
					<span>付款方式：</span> <span style="color: #292929;">微信支付</span>
				</div>
			</div>
		</div>
		<div data-am-widget="list_news"
			class="am-list-news am-list-news-default"
			style="margin: 0; border-bottom: none;">
			<div class="am-list-news-bd">
				<ul class="am-list">
					<li class="am-g am-list-item-desced"
						style="padding: 4px 10px; border-bottom: none;">
						<div class="am-u-sm-12" style="text-align: right; padding: 0;">
							<button id="1_1_payBtn" type="button"
								class="am-btn am-btn-primary am-round"
								style="padding-left: 1.2em; padding-right: 1.2em; background-color: #ec6c2c; color: #fff; border-color: #ec6c2c; border-radius: 4px; font-size: 1.6rem;"
								onclick="toPay(1, 1, 1,60.9, 'T123456')">管理</button>
						</div>
					</li>
				</ul>
			</div>
		</div>
		 -->
		<div id="cardList">
		</div>

		<input type="hidden" id="uid" value="${uid }" />
		<input type="hidden" id="ecode" value="${ecode }" />
	<script>

	var uid = $("#uid").val();
	var ecode =  $("#ecode").val();
	var winWidth;
	var winHeight;
	$(function(){
		winWidth = $(document).width();
		winHeight = $(document).height();
		queryList();
	});
	
	function toManage(i) {
	    var plateNumber = $("#plateNumber"+i).val();
	    var parkCode = $("#parkCode"+i).val();
	    var deadlineDate = $("#deadlineDate"+i).val();
	    var price = $("#price"+i).val();
	    var status = $("#status"+i).val();
	    var parkName = $("#parkName"+i).val();
		window.location.href = '<%=basePath%>wechat/cardManage?plateNumber=' + plateNumber
				+ '&parkCode=' + parkCode + '&deadlineDate=' + deadlineDate + '&price=' + price + '&status=' + status
				+ '&parkName=' + parkName + '&ecode=' + ecode + '&uid=' + uid;
	}
	
	function queryList()
	{
		var url = '<%=basePath%>api/queryCardList';
			$.ajax(url, {
			    type: 'post',
			    data: { uid:uid, ecode:ecode },
			    success: function(result){
			    	var rtn = JSON.parse(result);
			    	$('#cardList').empty();
			    	if (rtn.code==1) {
			    		var len = rtn.data.length;
			    		if(len==0) {
				    		appendEmptyHtml();
				    	} else {
				    		for(var i=0; i<len; i++)
					    	{
					    		appendHtml(rtn.data[i], i);
					    	}
				    	}
			    	} else if (rtn.code == 0) {
			    		appendEmptyHtml();
			    	}
			    }
			});
	}
	
	function appendEmptyHtml() {
		var marginTop = winHeight/4;
		var divHtml = '<figure id="empty" data-am-widget="figure" class="am am-figure am-figure-default " data-am-figure="{}" style="margin: 0;margin-top:'+marginTop+'px;">'
		  	+'<div style="text-align: center;" align="center">'
		  	+'<img src="<%=basePath%>static/images/wechat/no_records.png" style="margin:0 auto; padding: 0px; height:6em; width:6em;"/>'
		  	+'<div style="margin-top: 0.3em;" class="nick-name">暂无月卡信息,首次开通现场登记</div>'
		  	+'</div>'
		  	+'</figure>';
   		$('#cardList').append(divHtml);
	}
	
	function appendHtml(obj, i)
	{
		var statusText;
		var statusImage;
		var payTypeText;
		if(obj.status == 1) {
			statusText = '<div class="am-u-sm-4" style="text-align: right; color: #2baf2b;">正常</div>';
			statusImage = '<%=basePath%>static/images/wechat/pay_wait.png';
		} else if(obj.status == 2) {
			statusText = '<div class="am-u-sm-4" style="text-align: right; color: #FF7F00;">过期</div>';
			statusImage = '<%=basePath%>static/images/wechat/pay_success.png';
		}
		var marginTop = 10;
		if (i==0) {
			marginTop = 0;
		}
		var liHtml = '<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; margin-top:'+marginTop+'px; " >'
			  +'<div class="am-list-news-bd">'
			  +'<ul class="am-list">'
			  +'<li class="am-g am-list-item-desced" style="padding-left: 10px; padding-right: 10px;">'
			  +'	<div class="am-u-sm-8" style="color:#666666; font-size: 15px;">截止日期:'+obj.deadlineDate+'</div>'
			  + statusText
			  +' </li>'
			  +'</ul>'
			  +'</div>'
			  +'</div>'
			  +'<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi" style="border:none; margin:0; padding-left: 20px; padding-right: 20px; height: 100px; background: #FFF;">'
			  +'<nav style="padding-top: 10px; padding-bottom: 10px;">'
			  +'<img src="'+statusImage+'" style="width: 80px; height: 80px;">'
			  +'</nav>'
			  +'<div class="am-titlebar-title" style="padding: 1.2em 1.2em; padding-left: 0.6em;">'
			  +'<div class="am-list-item-text" style="font-size: 1.6rem; padding: 4px 0; color: #666666;">'
			  +'	<span>车牌号：</span>'
			  +'	<span style="font-weight: bold;">'+obj.plateNumber+'</span>'
			  +'</div>'
			  +'<div class="am-list-item-text" style="font-size: 1.6rem; padding: 4px 0; color: #666666;">'
			  +'	<span>停车场：</span>'
			  +'	<span style="color: #292929;">'+obj.parkName+'</span>'
			  +'</div>'
			  +'</div>'
			  +'</div>'
			  +'<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin: 0; border-bottom: none;">'
			  +'<div class="am-list-news-bd">'
			  +'<ul class="am-list">'
			  +'<li class="am-g am-list-item-desced" style="padding: 4px 10px; border-bottom: none;">'
			  +'<div class="am-u-sm-12" style="text-align: right; padding: 0;">'

              +'<input type="hidden" id="plateNumber'+i+'" value="'+obj.plateNumber+'" />'
              +'<input type="hidden" id="parkCode'+i+'" value="'+obj.parkCode+'" />'
              +'<input type="hidden" id="deadlineDate'+i+'" value="'+obj.deadlineDate+'" />'
              +'<input type="hidden" id="price'+i+'" value="'+obj.price+'" />'
              +'<input type="hidden" id="status'+i+'" value="'+obj.status+'" />'
              +'<input type="hidden" id="parkName'+i+'" value="'+obj.parkName+'" />'

			  +'<button type="button" class="am-btn am-btn-primary am-round" style="padding-left: 1.2em; padding-right: 1.2em; background-color: #ec6c2c; color: #fff; border-color: #ec6c2c; border-radius: 4px; font-size: 1.6rem;" onclick="toManage('+i+')">管理</button>'
			  +'</div>'
			  +'</li>'
			  +'</ul>'
			  +'</div>'
			  +'</div>';
		$('#cardList').append(liHtml);
	}
	</script>

</body>
</html>